<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" @click="back">
          <img src="../../../assets/返回.png" alt="">
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <span>{{title}}</span>
        </div>
        <div class="div">
          <span class="solid" @click="keep()">保存</span>
        </div>
      </header>
      <div class="tabBar">
        <ul>
          <li :class="tabIndex == 1 ? 'select' : ''"
          @click="tabIndex = 1,getList()"
          >{{tabBar_left}}</li>
          <li :class="tabIndex == 2 ? 'select' : ''"
          @click="tabIndex = 2,getList()"
          >{{tabBar_right}}</li>
        </ul>
      </div>
      <van-search
        v-show="xt_type == 3 && tabIndex ==1"
        v-model="searchValue"
        shape="round"
        placeholder="输入菜谱、食材，如番茄炒蛋、黄瓜"
        left-icon=""
        show-action
        @keypress="onSearch"
        @keyup="onSearch"
        @clear="onSearch"
      >
        <template #left-icon>
          <div>
            <van-icon @click="onSearch" name="search" />
          </div>
        </template>
        <template #action>
        </template>
      </van-search>

    </div>
    <div class="mainTitle">
      <span v-if="main">{{main.xt_name}}</span>
      <span>
        <input v-model="num" type="number">
        {{ unit }}
      </span>
    </div>
    <van-field v-for="(item, index) in yaoPinArr" :key="index"
      @click="selectYaopin(item, index)"
               arrow-direction="down"
               type="text"
               readonly
               :label="item.xt_name" input-align="right"  />

  </div>
</template>

<script>
export default {
  name: 'SelectTreat',
  data () {
    return {
      xt_type: this.$route.query.xt_type,
      tabIndex: 1,
      num: 1,
      yaoPinArr: [],
      main: [],
      userid: this.$route.query.userid, // 用户登陆的id
      searchValue: '',
      index: 1
    }
  },
  computed: {
    title () {
      let title = ''
      if (this.xt_type == 1) {
        title = '胰岛素/胰岛素类类似物'
      } else if (this.xt_type == 2) {
        title = '选择口服降糖药'
      } else if (this.xt_type == 3) {
        title = '添加饮食'
      }
      document.title = title
      return title
    },
    tabBar_left () {
      let title = ''
      if (this.xt_type == 1) {
        title = '胰岛素/胰岛素类类似物'
      } else if (this.xt_type == 2) {
        title = '口服降糖药'
      } else if (this.xt_type == 3) {
        title = '食物列表'
      }
      return title
    },
    tabBar_right () {
      let title = ''
      if (this.xt_type == 1) {
        title = '常用药物'
      } else if (this.xt_type == 2) {
        title = '常用药物'
      } else if (this.xt_type == 3) {
        title = '常用食物'
      }
      return title
    },
    unit () {
      let unit = ''
      if (this.xt_type == 1) {
        unit = 'U'
      } else if (this.xt_type == 2) {
        unit = '粒'
      } else if (this.xt_type == 3) {
        unit = 'g'
      }
      return unit
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 保存
    keep () {
      let data = sessionStorage.getItem('xueTangData')
      if (data) {
        data = JSON.parse(data)
        this.main.h_content = this.num
        this.main.isKeep = false
        data.treatArr.map((curr, index) => {
          if (this.xt_type == curr.xt_type) {
            curr.list.push(this.main)
          }
        })
        data.index++
      }
      sessionStorage.setItem('xueTangData', JSON.stringify(data))
      this.$router.replace({path: '/ZhiLiaoList', query: {userid: this.userid}})
    },
    onSearch () {
      this.getList()
    },
    // 选择药品
    selectYaopin (item, index) {
      this.main = item
    },
    // 获取药品信息
    getList () {
      this.$http.findHeaXtZidian({
        xt_type: this.xt_type,
        type: this.tabIndex,
        name: this.searchValue
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.yaoPinArr = res.data.data
            if (!this.searchValue) {
              this.main = res.data.data[0]
            }
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      // this.$router.push({path: '/AddXueTang', query: {userid: this.userid}})
      this.$router.history.go(-1)
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      let data = sessionStorage.getItem('xueTangData')
      data = JSON.parse(data)
      data.index++
      sessionStorage.setItem('xueTangData', JSON.stringify(data))
    })
  },
  beforeRouteLeave (to, from, next) {
    // if (from.meta.keepAlive) {
    //   from.meta.scollTopPosition = document.getElementById('home_scheme_query').scrollTop
    // }
    next()
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top{
  position: sticky;
  top: 0;
  z-index: 9;
  background: white;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
}
.div{
  /*width: 33%;*/
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
  flex: 2;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.tabBar{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tabBar ul{
  width: 320px;
  height: 29px;
  display: flex;
}
.tabBar ul li{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #1da4f2;
  margin-right: -1px;
  border: 2px solid #1da4f2;
}
.tabBar ul li:first-child{
  border-radius: 5px 0 0 5px;
}
.tabBar ul li:last-child{
  border-radius: 0 5px 5px 0 ;
}
.select{
  background: #1da4f2 !important;
  color: #fff !important;
}
.mainTitle{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  background: #1da4f2;
  color: #FFFFFF;
}
.mainTitle input{
  width: 60px;
  height: 29px;
  border-radius: 5px;
  border: none;
  color: #333333;
  text-align: center;
}
</style>
